<template>
    <div class="box">
        <div class="box-b banner">
            <h2>正在运行
                <span>{{list.length}}</span>
            </h2>
            <ul class="box-ul">
                <li class="tanxin" v-for="item,index in $store.state.arr" :key="index">
                    <input type="checkbox" @click="hit(index)">
                    <i>
                        <b>{{index+1}}.</b>
                        {{item}}
                    </i>
                    <strong @click="remove(index)">x</strong>
                </li>
            </ul>
            <h2>运行完成
                <span>{{newlist.length}}</span>
            </h2>
            <ul class="box-ul-ul">
                <li class="tanxin" v-for="items,indexs in $store.state.newarr" :key="indexs">
                    <input type="checkbox" checked>
                    <i>
                        <b>{{indexs+1}}.</b>
                        {{items}}
                    </i>
                    <strong @click="newremove(indexs)">x</strong>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    methods:{
        remove(index){
            this.$store.commit('cutout',index)
        },
        hit(index){
            this.$store.commit('success',index)
        },
        newremove(indexs) {
            this.$store.commit('newcut', indexs)
        },
    },
    computed:{
        list(){
            return this.$store.state.arr
        },
        newlist() {
            return this.$store.state.newarr
        }
    }
    
    
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less"; 
ul{
    list-style: none;
}
.box{
    .box-b{
        background-color: gray;
        h2{
            position: relative;
            height: 35px;
            font-size: 16px;
            display: flex;
            align-items: center;
            padding-left: 40px;
            span{
                position: absolute;
                width: 30px;
                height: 18px;
                line-height: 18px;
                background-color: white;
                right: 40px;
            }
        }
        .box-ul{
            padding-right: 40px;

            li{
                position: relative;
                height: 30px;
                background-color: #fff;
                border: 1px solid #000;
                i{
                    padding-left: 50px;
                }
                strong{
                    position: absolute;
                    right: 10px;
                    cursor: pointer;
                }
            }
        }
        .box-ul-ul {
            padding-right: 40px;
            padding-bottom: 20px;
            li {
                position: relative;
                height: 30px;
                background-color: #fff;
                border: 1px solid #000;

                i {
                    padding-left: 50px;
                }

                strong {
                    position: absolute;
                    right: 10px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>